<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
  String path = request.getContextPath();
  String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<!DOCTYPE html>
<html lang="en">
<head>
  <base href="<%=basePath%>">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
  <meta charset="utf-8"/>
  <title>这里填写标题-空页面</title>

  <meta name="description" content=""/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>

  <!-- bootstrap & fontawesome -->
  <link rel="stylesheet" href="assets/css/bootstrap.min.css"/>
  <link rel="stylesheet" href="assets/font-awesome/4.5.0/css/font-awesome.min.css"/>
  <!-- text fonts -->
  <link rel="stylesheet" href="assets/css/fonts.googleapis.com.css"/>
  <!-- ace styles -->
  <link rel="stylesheet" href="assets/css/ace.min.css" class="ace-main-stylesheet" id="main-ace-style"/>
  <link rel="stylesheet" href="assets/css/ace-skins.min.css"/>
  <link rel="stylesheet" href="assets/css/ace-rtl.min.css"/>
  <!-- ace settings handler -->
  <script src="assets/js/ace-extra.min.js"></script>
  <script src="assets/ckeditor/ckeditor.js"></script>

</head>

<body class="no-skin">
<%@include file="navbar.jsp" %>

<div class="main-container ace-save-state" id="main-container">
  <script type="text/javascript">
    try {
      ace.settings.loadState('main-container')
    } catch (e) {
    }
  </script>

  <%@include file="siderbar.jsp" %>

  <div class="main-content">
    <div class="main-content-inner">
      <div class="breadcrumbs ace-save-state" id="breadcrumbs">
        <ul class="breadcrumb">
          <li>
            <i class="ace-icon fa fa-home home-icon"></i>
            <a href="#">Home</a>
          </li>

          <li>
            <a href="#">Other Pages</a>
          </li>
          <li class="active">Blank Page</li>
        </ul><!-- /.breadcrumb -->

        <div class="nav-search" id="nav-search">
          <form class="form-search">
								<span class="input-icon">
									<input type="text" placeholder="Search ..." class="nav-search-input" id="nav-search-input"
                         autocomplete="off"/>
									<i class="ace-icon fa fa-search nav-search-icon"></i>
								</span>
          </form>
        </div><!-- /.nav-search -->
      </div>

      <div class="page-content">
        <div class="ace-settings-container" id="ace-settings-container">
          <div class="btn btn-app btn-xs btn-warning ace-settings-btn" id="ace-settings-btn">
            <i class="ace-icon fa fa-cog bigger-130"></i>
          </div>

          <div class="ace-settings-box clearfix" id="ace-settings-box">
            <div class="pull-left width-50">
              <div class="ace-settings-item">
                <div class="pull-left">
                  <select id="skin-colorpicker" class="hide">
                    <option data-skin="no-skin" value="#438EB9">#438EB9</option>
                    <option data-skin="skin-1" value="#222A2D">#222A2D</option>
                    <option data-skin="skin-2" value="#C6487E">#C6487E</option>
                    <option data-skin="skin-3" value="#D0D0D0">#D0D0D0</option>
                  </select>
                </div>
                <span>&nbsp; Choose Skin</span>
              </div>

              <div class="ace-settings-item">
                <input type="checkbox" class="ace ace-checkbox-2 ace-save-state" id="ace-settings-navbar"
                       autocomplete="off"/>
                <label class="lbl" for="ace-settings-navbar"> Fixed Navbar</label>
              </div>

              <div class="ace-settings-item">
                <input type="checkbox" class="ace ace-checkbox-2 ace-save-state" id="ace-settings-sidebar"
                       autocomplete="off"/>
                <label class="lbl" for="ace-settings-sidebar"> Fixed Sidebar</label>
              </div>

              <div class="ace-settings-item">
                <input type="checkbox" class="ace ace-checkbox-2 ace-save-state" id="ace-settings-breadcrumbs"
                       autocomplete="off"/>
                <label class="lbl" for="ace-settings-breadcrumbs"> Fixed Breadcrumbs</label>
              </div>

              <div class="ace-settings-item">
                <input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-rtl" autocomplete="off"/>
                <label class="lbl" for="ace-settings-rtl"> Right To Left (rtl)</label>
              </div>

              <div class="ace-settings-item">
                <input type="checkbox" class="ace ace-checkbox-2 ace-save-state" id="ace-settings-add-container"
                       autocomplete="off"/>
                <label class="lbl" for="ace-settings-add-container">
                  Inside
                  <b>.container</b>
                </label>
              </div>
            </div><!-- /.pull-left -->

            <div class="pull-left width-50">
              <div class="ace-settings-item">
                <input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-hover" autocomplete="off"/>
                <label class="lbl" for="ace-settings-hover"> Submenu on Hover</label>
              </div>

              <div class="ace-settings-item">
                <input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-compact" autocomplete="off"/>
                <label class="lbl" for="ace-settings-compact"> Compact Sidebar</label>
              </div>

              <div class="ace-settings-item">
                <input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-highlight" autocomplete="off"/>
                <label class="lbl" for="ace-settings-highlight"> Alt. Active Item</label>
              </div>
            </div><!-- /.pull-left -->
          </div><!-- /.ace-settings-box -->
        </div><!-- /.ace-settings-container -->

        <div class="row">
          <div class="col-xs-12">
            <!-- PAGE CONTENT BEGINS -->
            <form id="product-form" class="form-horizontal" role="form"
                  action="product.do" method="post">
              <input type="hidden" name="action" value="doAdd">
              <%--              图片上传元素--%>
              <div class="form-group">
                <label class="col-sm-3 control-label no-padding-right"> 商品图片 </label>
                <div class="col-sm-9">
                  <div class="col-sm-5" style="position: relative;">
                    <input id="photo-file" type="file"
                           class="hidden" onchange="upload()">
                    <a style="display: inline-block;padding: 6px 12px;" href="javascript:void(0);"
                       onclick="selectPhoto()">点击上传图片</a>
                    <img id="img-photo" src="" width="160" height="160"/>
                    <input type="hidden" name="fileName">
                  </div>
                  <span class="help-inline col-xs-12 col-sm-7 red">
												<span class="middle">*</span>
											</span>
                </div>
              </div>

              <div class="form-group">
                <label class="col-sm-3 control-label no-padding-right" for="type-one"> 一级分类 </label>
                <div class="col-sm-6">
                  <select class="form-control" id="type-one" name="typeOne">
                  </select>
                </div>
              </div>
              <div class="form-group">
                <label class="col-sm-3 control-label no-padding-right" for="type-two"> 二级分类 </label>
                <div class="col-sm-6">
                  <select class="form-control" id="type-two" name="typeTwo">
                  </select>
                </div>
              </div>
              <div class="form-group">
                <label class="col-sm-3 control-label no-padding-right" for="type-three"> 三级分类 </label>
                <div class="col-sm-6">
                  <select class="form-control" id="type-three" name="typeThree">
                  </select>
                </div>
              </div>
              <div class="form-group">
                <label class="col-sm-3 control-label no-padding-right" for="product-name"> 商品名称 </label>
                <div class="col-sm-9">
                  <input name="name" type="text" id="product-name" placeholder="请输入商品名称"
                         class="col-xs-10 col-sm-5"/>
                  <span class="help-inline col-xs-12 col-sm-7">
												<span class="middle"></span>
											</span>
                </div>
              </div>
              <div class="form-group">
                <label class="col-sm-3 control-label no-padding-right" for="price"> 商品价格 </label>
                <div class="col-sm-9">
                  <input name="price" type="text" id="price" placeholder="请输入商品价格"
                         class="col-xs-10 col-sm-5"/>
                  <span class="help-inline col-xs-12 col-sm-7">
												<span class="middle">Inline help text</span>
											</span>
                </div>
              </div>
              <div class="form-group">
                <label class="col-sm-3 control-label no-padding-right" for="stock"> 商品库存 </label>
                <div class="col-sm-9">
                  <input name="stock" type="text" id="stock" placeholder="请输入商品库存"
                         class="col-xs-10 col-sm-5"/>
                  <span class="help-inline col-xs-12 col-sm-7">
												<span class="middle">*</span>
											</span>
                </div>
              </div>
              <div class="form-group">
                <label class="col-sm-3 control-label no-padding-right" for="description"> 商品描述 </label>
                <div class="col-sm-9">
                  <textarea id="description" name="description" cols="5" rows="5"></textarea>
                </div>
              </div>

              <div class="clearfix form-actions">
                <div class="col-md-offset-3 col-md-9">
                  <button class="btn btn-info" type="button" id="btn-save">
                    <i class="ace-icon fa fa-check bigger-110"></i>
                    保存
                  </button>
                  &nbsp; &nbsp; &nbsp;
                  <button class="btn" type="reset">
                    <i class="ace-icon fa fa-undo bigger-110"></i>
                    重填
                  </button>
                </div>
              </div>
            </form>
            <!-- PAGE CONTENT ENDS -->
          </div><!-- /.col -->
        </div><!-- /.row -->
      </div><!-- /.page-content -->
    </div>
  </div><!-- /.main-content -->

  <%@include file="footer.jsp" %>
</div><!-- /.main-container -->

<script src="assets/js/jquery-2.1.4.min.js"></script>
<script type="text/javascript">
  if ('ontouchstart' in document.documentElement) document.write("<script src='assets/js/jquery.mobile.custom.min.js'>" + "<" + "/script>");
</script>
<script src="assets/js/bootstrap.min.js"></script>

<!-- ace scripts -->
<script src="assets/js/ace-elements.min.js"></script>
<script src="assets/js/ace.min.js"></script>
<script src="assets/js/common.js"></script>
<script>
  $(function () {
    // 页面加载时，加载一级分类数据
    fillListByParentId(0, $("#type-one"));

    // 一级分类名称绑定的事件
    $("#type-one").change(function () {
      // 显示该分类下的所有的二级分类数据
      fillListByParentId(this.value, $("#type-two"));
    });

    // 二级分类名称绑定的事件
    $("#type-two").change(function () {
      // 显示该分类下的所有的二级分类数据
      fillListByParentId(this.value, $("#type-three"));
    });

    // 给商品描述，加上富文本编辑器
    CKEDITOR.replace('description');

    // 给提交按钮绑定点击事件-完成提交新增表单的操作
    $("#btn-save").click(function () {
      // 判断图片是否上传
      if (!$("[name=fileName]").val()) {
        $("#photo-file").parent().next("span").children().text("请选择商品图片");
        return;
      }
      // 其他非空校验
      // 提交表单
      $("#product-form").submit();
    });
  });

  // 点击选择要上传的文件
  function selectPhoto() {
    $("#photo-file").click();
  }

  // 图片上传
  function upload() {
    let $photo = $("#photo-file");
    if (!$photo.val()) {
      $photo.parent().next("span").children().text("请选择商品图片");
      return;
    }

    // 异步发送请求，进行文件上传的操作
    // 准备上传的文件
    let formData = new FormData();
    formData.append("photo", $photo.get(0).files[0]);
    $.ajax({
      "url": "fileUpload.do",
      "type": "post",
      "data": formData,
      "processData": false,
      "contentType": false,
      "dataType": "json",
      "success": function (result) {
        if (result.code == "00000") {
          $("#img-photo").attr("src", "upload/" + result.data);
          // 设置表单中的待保存的图片名称值
          $("[name=fileName]").val(result.data);
        } else {
          $photo.parent().next("span").children().text(result.errorMessage);
        }
      },
      "error": function (e) {
        console.log(e.message);
      }
    });

  }
</script>
</body>
</html>
